﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>机器猫帮助中心</title>
</head>
<style>

#tt{width: 990px;margin: 0 auto;border: 5px solid #F96;border-radius: 15px;box-shadow: 10px 10px 6px #F9F;
   background-image:-webkit-linear-gradient(to bottom,#b8f2f4,#4bc7c8,#a1f7f8,red,green,#88e8f6,#b8f2f4,red,yellow,orange);
   background-image:-moz-linear-gradient(to bottom,#b8f2f4,#4bc7c8,#a1f7f8,red,green,#88e8f6,#b8f2f4,red,yellow,orange);
   background-image:-ms-linear-gradient(to bottom,#b8f2f4,#4bc7c8,#a1f7f8,red,green,#88e8f6,#b8f2f4,red,yellow,orange);
    background-image:-o-linear-gradient(to bottom,#b8f2f4,#4bc7c8,#a1f7f8,red,green,#88e8f6,#b8f2f4,red,yellow,orange);
   background-image:linear-gradient(to bottom,#b8f2f4,#4bc7c8,#a1f7f8,red,green,#88e8f6,#b8f2f4,red,yellow,orange);
}
#qypkz,#grpkz{width: 110px;height: 40px;margin-top: 10px;margin-left: 10px; display: inline-block;font-size: 20px;text-align: center;line-height: 40px;}
.span1,.span2,.span3,.span4{margin-top: 20px;text-align: center;width: 90px;height: 30px;display: inline-block;line-height: 30px;font-size: 18px;margin-left: 10px;}
img{display:none;}
.active{background:#1be6f8;color: white;}
#div1,#div2,#div3,#div4,#div2a{width:980px;margin-top: 30px; display:none;}
#qyp,#grp{display: none;}
input{cursor: pointer; width: 74px;height: 36px;border-radius: 10px;line-height: 36px;text-align: center; background: #CFF;font-family: '微软雅黑';font-size: 16px;margin-bottom: 12px;}
input:hover{background: #1be6f8;color: white;}

form{width: 980px;margin: 0 auto;}




span{width:80px;height:30px;text-align:center;border:1px solid white;cursor:pointer}

</style>
<script>
window.onload=function()
{
	var kz=document.getElementById('kz');
	var qygr=kz.getElementsByTagName('span');
	
	// var kz1=document.getElementById('kz1');
	var form=document.getElementsByTagName('form');



	var qyp=document.getElementById('qyp');
	var grp=document.getElementById('grp');

	var oDiv1=document.getElementById('div1');
	var oDiv2=document.getElementById('div2');
	var oDiv2a=document.getElementById('div2a');
	var oDiv2b=document.getElementById('div2b');
	//var oDiv2b=document.getElementById('div2a');

	var oDiv3=document.getElementById('div3');
	var oDiv4=document.getElementById('div4');

	var oDiv=qyp.getElementsByTagName('div');
	var oDivv=grp.getElementsByTagName('div');
	
	var oBtn=oDiv1.getElementsByTagName('input');
	var oImg=oDiv1.getElementsByTagName('img');
	var aMap=oDiv1.getElementsByTagName('map');

	var oBtn2=oDiv2.getElementsByTagName('input');
	var oImg2=oDiv2.getElementsByTagName('img');
	var aMap2=oDiv2.getElementsByTagName('map');
    
    var oBtn2a=oDiv2a.getElementsByTagName('input');
	var oImg2a=oDiv2a.getElementsByTagName('img');
	var aMap2a=oDiv2a.getElementsByTagName('map');
     
    var oBtn2b=oDiv2b.getElementsByTagName('input');
	var oImg2b=oDiv2b.getElementsByTagName('img');
     var aMap2b=oDiv2b.getElementsByTagName('map');

	var oBtn3=oDiv3.getElementsByTagName('input');
	var oImg3=oDiv3.getElementsByTagName('img');
	var aMap3=oDiv3.getElementsByTagName('map');

	var oBtn4=oDiv4.getElementsByTagName('input');
	var oImg4=oDiv4.getElementsByTagName('img');
	var aMap4=oDiv4.getElementsByTagName('map');

	var oSpan=qyp.getElementsByTagName('span');
	var oSpan2=grp.getElementsByTagName('span');

    tab(oBtn,oImg,aMap);
	tab(oBtn2,oImg2,aMap2);
    tab(oBtn2a,oImg2a,aMap2a);
    tab(oBtn2b,oImg2b,aMap2b);


	tab(oBtn3,oImg3,aMap3);
	tab(oBtn4,oImg4,aMap4);
	
     
      header(oSpan,oDiv);  
      header(oSpan2,oDivv);
      header(qygr,form);

  var zfb=document.getElementById('zfb');
  var img1=document.getElementById('img1');
  // zfb.onmouseover=function()
  // {
  //     alert('aaaa');
  // }

	
}

     function tab(oBtn,oImg,aMap)
     {
     	    var iNow=0;

	
	        var i=0;
	
	        for(i=0;i<oBtn.length;i++)
	        {
	        	oBtn[i].index=i;
	        	oBtn[i].onclick=function()
	        	{
	        		iNow=this.index;
	        		for(i=0;i<oBtn.length;i++)
	        		{
	        			oBtn[i].className='';
	        			oImg[i].style.display='none';
			}       
	        		this.className='active';
	        		oImg[this.index].style.display='block';
	        	}
	        }
	        for(i=0;i<aMap.length;i++)
	        {
	        aMap[i].onclick=function()
	        {
	        	
	        	iNow++;
	        	for(i=0;i<oBtn.length;i++)
	        	{
	        		oBtn[i].className='';
	        		oImg[i].style.display='none';
	        	}
	        	oBtn[iNow].className='active';
	        	oImg[iNow].style.display='block';
	        	
	           }
	           }
       };



   function header(oSpan,oDiv)
   {
   	   //头部转换
	for( i=0;i<oSpan.length;i++)
	{
		oSpan[i].index=i;
		oSpan[i].onclick=function()
		{
			
			for(var i=0;i<oSpan.length;i++)
			{
				oSpan[i].style.background='none';
				oDiv[i].style.display='none';
			}
			this.style.background='#1be6f8';

			oDiv[this.index].style.display='block';
		}
	}
   }

</script>
<body>
<div id="tt">


<div id="kz">
<span id="qypkz" style="background:#1be6f8;">商家篇</span>
<span id="grpkz">会员篇</span> 
</div>

<!-- <div id="kz1"> -->
<form id="qyp" style="display:block;">
<span class="span1" style="background:#1be6f8;">入驻指南</span>
<span class="span2">发布商品</span>
<span class="span3">店铺设置</span>
<span class="span4">店铺解析</span>


<!-- <div id="zsm"> -->
<div id="div1" style="display:block" >
<input type="button" value="第一步" class="active" />
<input type="button" value="第二步" />
<input type="button" value="第三步" />
<input type="button" value="第四步" />
<input type="button" value="第五步" />
<input type="button" value="第六步" />
<input type="button" value="第七步" />
<input type="button" value="第八步" />
<input type="button" value="第九步" />
<input type="button" value="第十步" />
<input type="button" value="第十一步" />
<input type="button" value="第十二步" />
<img src="images/kw1.gif" style="display:block" usemap="#Map0"  />
<img src="images/kw2.gif" usemap="#Map1"  />
<img src="images/kw3.gif" usemap="#Map2"  />
<img src="images/kw4.gif" usemap="#Map3"  />
<img src="images/kw5.gif" usemap="#Map4"  />
<img src="images/kw6.gif"  usemap="#Map5"  />
<img src="images/kw7.gif" usemap="#Map6"  />
<img src="images/kw8.gif"  usemap="#Map7" />
<img src="images/kw9.gif" usemap="#Map8"  />
<img src="images/kw10.gif"  usemap="#Map9"  />
<img src="images/kw11.gif" usemap="#Map10"  />
<img src="images/kw12.gif"  usemap="#Map11" />

<map name="Map0">
<area shape="rect" coords="141,0,196,20" href="#" >
</map>
<map name="Map1">
<area shape="rect" coords="613,404,709,438" href="#" >
</map>
<map name="Map2">
<area shape="rect" coords="419,460,474,482" href="#" >
<area shape="rect" coords="721,460,780,482" href="#" >
</map>

<map name="Map3">
<area shape="rect" coords="428,531,520,570" href="#" >
</map>
<map name="Map4">
<area shape="rect" coords="570,928,658,966" href="#" >
</map>
<map name="Map5">
<area shape="rect" coords="554,333,654,375" href="#" >
</map>
<map name="Map6">
<area shape="rect" coords="463,329,658,377" href="#" >
</map>
<map name="Map7">
<area shape="rect" coords="551,360,654,402" href="#" >
</map>
<map name="Map8">
<area shape="rect" coords="533,557,707,612" href="#" >
</map>
<map name="Map9">
<area shape="rect" coords="548,360,653,401" href="#" >
</map>
<map name="Map10">
<area shape="rect" coords="410,609,510,654" href="#" >
</map>
<!-- <map name="Map11">
<area shape="rect" coords="482,557,649,596" href="#" >
</map> -->


</div>


<div id="div2" >
<input type="button" value="第一步" class="active" />
<input type="button" value="第二步" />
<input type="button" value="第三步" />
<input type="button" value="第四步" />
<input type="button" value="第五步" />
<input type="button" value="第六步" />
<input type="button" value="第七步" />
<input type="button" value="第八步" />

<img src="images/fb00.gif" style="display:block" usemap="#Map00"  />
<img src="images/fb01.gif" usemap="#Map1001"  />
<img src="images/fb02.gif" usemap="#Map20"  />
<img src="images/fb03.gif" usemap="#Map30"  />
<img src="images/fb04.gif" usemap="#Map40"  />
<img src="images/fb05.gif"  usemap="#Map50"  />
<img src="images/fb06.gif" usemap="#Map60"  />
<img src="images/fb07.gif"  usemap="#Map70"  />


<map name="Map00">
<area shape="rect" coords="718,161,788,191" href="#" >
</map>
<map name="Map1001">
<area shape="rect" coords="349,423,432,475" href="#" >
<area shape="rect" coords="650,423,733,475" href="#" >
</map>
<map name="Map20">
<area shape="rect" coords="483,511,645,565" href="#" >
</map>
<map name="Map30">
<area shape="rect" coords="458,34,543,64" href="#" >
</map>
<map name="Map40">
<area shape="rect" coords="477,446,651,488" href="#" >
</map>
<map name="Map50">
<area shape="rect" coords="477,1488,643,1533" href="#" >
</map>
<map name="Map60">
<area shape="rect" coords="482,557,649,596" href="#" >
</map>

</div>



<div id="div2a" >
<input type="button" value="第一步" class="active" />
<input type="button" value="第二步" />
<input type="button" value="第三步" />
<input type="button" value="第四步" />
<input type="button" value="第五步" />
<input type="button" value="第六步" />
<input type="button" value="第七步" />


<img src="images/sz1.gif" style="display:block" usemap="#Mapsz1"  />
<img src="images/sz2.gif" usemap="#Mapsz2"  />
<img src="images/sz3.gif" usemap="#Mapsz3"  />
<img src="images/sz4.gif" usemap="#Mapsz4"  />
<img src="images/sz5.gif" usemap="#Mapsz5"  />
<img src="images/sz6.gif" usemap="#Mapsz6"  />
<img src="images/sz7.gif" usemap="#Mapsz6"  />


<map name="Mapsz1">
<area shape="rect" coords="564,39,636,66" href="#" >
</map>
<map name="Mapsz2">
<area shape="rect" coords="573,1047,686,1095" href="#" >

</map>
<map name="Mapsz3">
<area shape="rect" coords="505,372,691,422" href="#" >
</map>
<map name="Mapsz4">
<area shape="rect" coords="844,40,979,77" href="#" >
</map>
<map name="Mapsz5">
<area shape="rect" coords="466,623,614,665 " href="#" >
</map>
<map name="Mapsz6">
<area shape="rect" coords="499,391,669,438 " href="#" >
</map>

</div>

<div id="div2b">
<input type="button" value="第一步" class="active" />
<img src="images/index.gif" style="display:block" usemap="#yyff"  />
<map name="yyff">
<area shape="rect" coords="573,1047,686,1095" href="#" >
</map>
</div>

<!-- </div>   -->
<!-- 最上面 -->
</form>



<form id="grp">
<span class="span1" style="background:#1be6f8;">购买指南</span>
 <span class="span2">退款导航</span>
<!-- <div id="zxm"> --><!-- zxm -->
<div id="div3" style="display:block" >
<input type="button" value="第一步" class="active" />
<input type="button" value="第二步" />
<input type="button" value="第三步" />
<input type="button" value="第四步" />
<input type="button" value="第五步" />
<input type="button" value="第六步" />
<input type="button" value="第七步" />
<input type="button" value="第八步" />

<img src="images/hy01.gif" style="display:block" usemap="#Map01"  />
<img src="images/hy02.gif" usemap="#Map11"  />
<img src="images/hy03.gif" usemap="#Map21"  />
<img src="images/hy04.gif" usemap="#Map31"  />

<img src="images/hy06.gif"  usemap="#Map51"  />
<img src="images/hy07.gif" usemap="#Map61"  />

<img src="images/hy08.gif" usemap="#Map81"  />
<!-- <img id="img1" class="img1"  src="images/hy081.gif" usemap="#Map81"  /> 
 -->
<img src="images/hy09.gif" usemap="#Map91"  />

<map name="Map01">
<area shape="rect" coords="95,0,151,22" href="#" >
</map>
<map name="Map11">
<area shape="rect" coords="589,287,701,330" href="#" >
</map>
<map name="Map21">
<area shape="rect" coords="168,228,254,259" href="#" >
</map>
<map name="Map31">
<area shape="rect" coords="187,260,351,371" href="#" >
<area shape="rect" coords="205,517,335,558" href="#" >
</map>

<map name="Map51">
<area shape="rect" coords="311,293,403,330" href="#" >
</map>
<map name="Map61">
<area shape="rect" coords="848,605,967,663" href="#" >
</map>
<map name="Map81">
<area shape="rect" coords="421,464,578,514" href="#" >
<area id="zfb" shape="rect" coords="27,357,219,435" href="#" >
</map>




</div>


<div id="div4" >
<input type="button" value="第一步" class="active" />
<input type="button" value="第二步" />
<input type="button" value="第三步" />
<input type="button" value="第四步" />
<input type="button" value="第五步" />
<input type="button" value="第六步" />
<input type="button" value="第七步" />
<input type="button" value="第八步" />
<input type="button" value="第九步" />
<input type="button" value="第十步" />

<img src="images/hy01.gif" style="display:block" usemap="#Map001"  />
<img src="images/hy02.gif" usemap="#Map101"  />
<img src="images/tk01.gif" usemap="#Map201"  />
<img src="images/tk02.gif" usemap="#Map301"  />
<img src="images/tk03.gif" usemap="#Map501"  />

<img src="images/tk05.gif" usemap="#Map601"  />
<img src="images/tk06.gif"  usemap="#Map701"  />
<img src="images/tk07.gif"  usemap="#Map801"  />
<img src="images/tk08.gif"  usemap="#Map901"  />
<img src="images/tk09.gif"  />
<map name="Map001">
<area shape="rect" coords="95,0,151,22" href="#" >
</map>
<map name="Map101">
<area shape="rect" coords="589,287,701,330" href="#" >

</map>
<map name="Map201">
<area shape="rect" coords="695,0,785,35" href="#" >
</map>
<map name="Map301">
<area shape="rect" coords="19,236,150,274" href="#" >
</map>

<map name="Map501">
<area shape="rect" coords="829,271,910,304" href="#" >
</map>
<map name="Map601">
<area shape="rect" coords="462,459,580,506" href="#" >
</map>
<map name="Map701">
<area shape="rect" coords="14,274,164,308" href="#" >
</map>
<map name="Map801">
<area shape="rect" coords="608,305,708,341" href="#" >
</map>
<map name="Map901">
<area shape="rect" coords="444,670,598,725" href="#" >
</map>

</div>

<!-- </div> --><!-- zxm -->
</form>

<!-- </div> -->
</div>
<div style="text-align:center;">

</div>
</body>
</html>
